{% extends "base.html" %}

{% block title %}首页 - 个人数据分析仪表板{% endblock %}

{% block content %}
<div class="row">
    <div class="col-lg-8 mx-auto">
        <!-- 欢迎卡片 -->
        <div class="card mb-4 fade-in">
            <div class="card-body text-center p-5">
                <i class="fas fa-database fa-3x text-primary mb-3"></i>
                <h1 class="card-title mb-3">欢迎使用数据分析仪表板</h1>
                <p class="card-text text-muted mb-4">
                    上传您的 CSV 数据文件，即可获得专业的数据分析和可视化结果。
                    支持智能图表推荐、统计分析和交互式可视化。
                </p>
                
                <!-- 功能特点 -->
                <div class="row text-start mb-4">
                    <div class="col-md-6">
                        <div class="d-flex align-items-center mb-2">
                            <i class="fas fa-upload text-primary me-2"></i>
                            <span>快速数据上传</span>
                        </div>
                        <div class="d-flex align-items-center mb-2">
                            <i class="fas fa-chart-bar text-success me-2"></i>
                            <span>智能图表推荐</span>
                        </div>
                        <div class="d-flex align-items-center mb-2">
                            <i class="fas fa-calculator text-warning me-2"></i>
                            <span>统计分析报告</span>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="d-flex align-items-center mb-2">
                            <i class="fas fa-eye text-info me-2"></i>
                            <span>数据预览与探索</span>
                        </div>
                        <div class="d-flex align-items-center mb-2">
                            <i class="fas fa-download text-secondary me-2"></i>
                            <span>图表导出功能</span>
                        </div>
                        <div class="d-flex align-items-center mb-2">
                            <i class="fas fa-mobile-alt text-primary me-2"></i>
                            <span>响应式设计</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 文件上传区域 -->
        <div class="card mb-4 fade-in">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0">
                    <i class="fas fa-cloud-upload-alt me-2"></i>
                    上传数据文件
                </h5>
            </div>
            <div class="card-body">
                <div class="upload-area" id="uploadArea">
                    <i class="fas fa-file-csv fa-3x text-muted mb-3"></i>
                    <h6 class="mb-2">拖放 CSV 文件到此处</h6>
                    <p class="text-muted mb-3">或点击选择文件上传</p>
                    
                    <form id="uploadForm" enctype="multipart/form-data">
                        <input type="file" id="fileInput" name="file" accept=".csv" class="d-none">
                        <button type="button" class="btn btn-primary" onclick="document.getElementById('fileInput').click()">
                            <i class="fas fa-folder-open me-2"></i>
                            选择文件
                        </button>
                    </form>
                    
                    <div class="mt-3">
                        <small class="text-muted">
                            <i class="fas fa-info-circle me-1"></i>
                            支持的文件格式：CSV | 最大文件大小：16MB
                        </small>
                    </div>
                </div>
                
                <!-- 上传进度 -->
                <div class="loading" id="uploadProgress">
                    <div class="spinner-border" role="status">
                        <span class="visually-hidden">上传中...</span>
                    </div>
                    <p class="mt-2 mb-0">正在处理文件，请稍候...</p>
                </div>
                
                <!-- 错误提示 -->
                <div class="alert alert-danger d-none" id="errorAlert">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    <span id="errorMessage"></span>
                </div>
                
                <!-- 成功提示 -->
                <div class="alert alert-success d-none" id="successAlert">
                    <i class="fas fa-check-circle me-2"></i>
                    文件上传成功！正在跳转到分析页面...
                </div>
            </div>
        </div>

        <!-- 使用指南 -->
        <div class="card fade-in">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="fas fa-question-circle me-2"></i>
                    使用指南
                </h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <div class="border rounded p-3 h-100">
                            <h6 class="text-primary">
                                <i class="fas fa-file-import me-2"></i>
                                数据准备
                            </h6>
                            <ul class="list-unstyled small text-muted mb-0">
                                <li>• 确保数据为 CSV 格式</li>
                                <li>• 第一行应包含列标题</li>
                                <li>• 尽量避免特殊字符</li>
                                <li>• 建议文件大小在 10MB 以内</li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-md-6 mb-3">
                        <div class="border rounded p-3 h-100">
                            <h6 class="text-success">
                                <i class="fas fa-chart-pie me-2"></i>
                                分析功能
                            </h6>
                            <ul class="list-unstyled small text-muted mb-0">
                                <li>• 自动数据类型识别</li>
                                <li>• 缺失值分析</li>
                                <li>• 智能图表推荐</li>
                                <li>• 描述性统计</li>
                            </ul>
                        </div>
                    </div>
                </div>
                
                <!-- 示例数据 -->
                <div class="mt-3">
                    <h6>
                        <i class="fas fa-download me-2"></i>
                        示例数据
                    </h6>
                    <p class="text-muted small mb-2">
                        如果您没有数据文件，可以下载我们准备的示例数据进行测试：
                    </p>
                    <button class="btn btn-outline-primary btn-sm" onclick="generateSampleData()">
                        <i class="fas fa-file-download me-1"></i>
                        生成示例数据
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    // 文件拖放功能
    const uploadArea = document.getElementById('uploadArea');
    const fileInput = document.getElementById('fileInput');
    
    // 防止默认拖放行为
    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
        uploadArea.addEventListener(eventName, preventDefaults, false);
        document.body.addEventListener(eventName, preventDefaults, false);
    });

    // 添加拖放样式
    ['dragenter', 'dragover'].forEach(eventName => {
        uploadArea.addEventListener(eventName, highlight, false);
    });

    ['dragleave', 'drop'].forEach(eventName => {
        uploadArea.addEventListener(eventName, unhighlight, false);
    });

    // 处理拖放文件
    uploadArea.addEventListener('drop', handleDrop, false);
    
    // 处理文件选择
    fileInput.addEventListener('change', function() {
        if (this.files.length > 0) {
            uploadFile(this.files[0]);
        }
    });

    function preventDefaults(e) {
        e.preventDefault();
        e.stopPropagation();
    }

    function highlight() {
        uploadArea.classList.add('dragover');
    }

    function unhighlight() {
        uploadArea.classList.remove('dragover');
    }

    function handleDrop(e) {
        const dt = e.dataTransfer;
        const files = dt.files;
        
        if (files.length > 0) {
            uploadFile(files[0]);
        }
    }

    function uploadFile(file) {
        // 检查文件类型
        if (!file.name.toLowerCase().endsWith('.csv')) {
            showError('请选择 CSV 格式的文件');
            return;
        }
        
        // 检查文件大小
        if (file.size > 16 * 1024 * 1024) {
            showError('文件大小不能超过 16MB');
            return;
        }
        
        // 显示加载状态
        showLoading();
        
        // 创建 FormData
        const formData = new FormData();
        formData.append('file', file);
        
        // 上传文件
        $.ajax({
            url: '/upload',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                hideLoading();
                showSuccess();
                
                // 跳转到仪表板
                setTimeout(function() {
                    window.location.href = '/dashboard';
                }, 1500);
            },
            error: function(xhr, status, error) {
                hideLoading();
                let errorMsg = '上传失败';
                
                if (xhr.responseJSON && xhr.responseJSON.error) {
                    errorMsg = xhr.responseJSON.error;
                }
                
                showError(errorMsg);
            }
        });
    }

    function showLoading() {
        $('#uploadProgress').show();
        $('#errorAlert').addClass('d-none');
        $('#successAlert').addClass('d-none');
    }

    function hideLoading() {
        $('#uploadProgress').hide();
    }

    function showError(message) {
        $('#errorMessage').text(message);
        $('#errorAlert').removeClass('d-none');
        $('#successAlert').addClass('d-none');
    }

    function showSuccess() {
        $('#successAlert').removeClass('d-none');
        $('#errorAlert').addClass('d-none');
    }
});

function generateSampleData() {
    // 生成示例 CSV 数据
    const sampleData = `姓名,年龄,城市,收入,教育程度
张三,25,北京,8000,本科
李四,30,上海,12000,硕士
王五,28,广州,9500,本科
赵六,35,深圳,15000,硕士
钱七,22,杭州,6500,专科
孙八,40,成都,18000,博士
周九,27,重庆,8500,本科
吴十,32,西安,11000,硕士
郑一,26,南京,9000,本科
楚二,38,武汉,16000,硕士
卫三,24,天津,7500,本科
蒋四,45,青岛,20000,博士
沈五,29,大连,10000,本科
韩六,33,沈阳,12500,硕士
杨七,31,长沙,11500,硕士`;

    // 创建下载链接
    const blob = new Blob([sampleData], { type: 'text/csv;charset=utf-8;' });
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = 'sample_data.csv';
    link.click();
}
</script>
{% endblock %}